<template>
  <img :src="src" alt="alt" :style="style">
</template>

<script>
export default {
  name: "ImageBox",
  data() {
    return {}
  },
  props: {
    src: {
      type: String,
      default: '',
      required: true
    },
    alt: {
      type: String,
      default: '图片',
    },
    width: {
      type: [String, Number],
      default: '',
    },
    height: {
      type: [String, Number],
      default: '',
    },
    size: {
      type: [String, Number],
      default: '',
    },
    circle: {
      type: Boolean,
      default: false,
    },
    radius: {
      type: [String, Number],
      default: '0',
    },
  },
  computed: {
    style() {
      return {
        width: this.size ? (this.size + this.fixUnit(this.size)) : (this.width + this.fixUnit(this.width)),
        height: this.size ? (this.size + this.fixUnit(this.size)) : (this.height + this.fixUnit(this.height)),
        borderRadius: this.circle ? '50%' : (this.radius + this.fixUnit(this.radius)),
      }
    }
  },

  methods: {
    fixUnit(unit) {
      unit = unit + '';
      return unit.includes('px') ? '': unit.includes('%') ? '' : 'px';
    }
  }

}
</script>

<style scoped>

</style>
